<template>
  <div>
    <div style="margin-top:30px">
      <div class="probtn">项目名称</div>
      <input v-model="search2" placeholder="Search" class="search" />
      <el-button type="primary" @click="letsearch1" class="searchBtn">搜索</el-button>
      <el-button type="primary" @click="redo1" class="redoBtn1">重置</el-button>
      <el-button type="primary" class="add2" @click="addData1()">添加一行</el-button>
      <el-button type="danger" class="delete1" @click="open(), batchDel1()">批量删除</el-button>
    </div>
    <div style="height: 400px;">
      <el-table :data="tableData.filter(data => !search || data.proName.toLowerCase().includes(search.toLowerCase()))"
        style="width: 1320px;line-height:40px;font-size:14px" max-height="400" @selection-change="handleSelectionChange"
        :default-sort="{ prop: 'casesum', order: 'ascending' }">
        <el-table-column type="selection" class="tablerow">
        </el-table-column>
        <el-table-column label="序号" prop="number" class="tablerow">
        </el-table-column>
        <el-table-column label="项目名称" prop="proName" class="tablerow">
        </el-table-column>
        <el-table-column label="用例数目" prop="caseNum" sortable :sort-orders="['ascending', 'descending']" class="tablerow">
        </el-table-column>
        <el-table-column label="最近执行时间" prop="useTime" sortable :sort-by="['caseNum', 'useTime']" class="tablerow">
        </el-table-column>
        <el-table-column label="项目描述" prop="proDescribe" class="tablerow">
        </el-table-column>
        <el-table-column text-align="right" label="操作">
          <template slot-scope="scope">
            <el-button @click="handleEdit1(scope.$index, scope.row)" size="small">Edit</el-button>
            <el-button type="danger" @click="handleDelete1(scope.$index, scope.row), open2()" size="small">Delete</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>


    <!-- 编辑抽屉 -->
    <el-drawer title="编辑集合" :visible.sync="drawer" :direction="direction" style="font-size:20px;text-align:center">
      <div>
        <div class="drawerrow">序号 <el-input v-model="number" class="editform1" style="margin-left:60px" /></div>
        <div class="drawerrow">项目名称 <el-input v-model="proName" class="editform1" /></div>
        <div class="drawerrow">用例数目 <el-input v-model="caseNum" class="editform1" /></div>
        <div class="drawerrow">最近执行时间 <el-input v-model="useTime" class="editform1" style="margin-left:10px;" /></div>
        <div class="drawerrow">项目描述 <el-input v-model="proDescribe" class="editform1" /></div>
        <el-button type="info" class="drawerbtn" @click="drawercancel1">取消编辑</el-button>
        <el-button type="success" class="drawerbtn" @click="confirmEdit1">确认更改</el-button>
      </div>
    </el-drawer>
    <!-- 页数 -->
    <div class="page2">
      <el-pagination background layout="prev, pager, next" :total="1000">
      </el-pagination>
    </div>
  </div>
</template>
<script>

export default {
  data() {
    return {

      tableData: [{
        number: '1',
        proName: '1',
        caseNum: '1',
        useTime: '20230324',
        proDescribe: 'json',
      }, {
        number: '2',
        proName: '2',
        caseNum: '5',
        useTime: '20220912',
        proDescribe: 'json',
      }, {
        number: '3',
        proName: '3',
        caseNum: '3',
        useTime: '20230728',
        proDescribe: 'json',

      }, {
        number: '4',
        proName: '4',
        caseNum: '2',
        useTime: '20220504',
        proDescribe: 'json',

      }, {
        number: '5',
        proName: '5',
        caseNum: '4',
        useTime: '20230819',
        proDescribe: 'json',

      }, {
        number: '6',
        proName: '6',
        caseNum: '7',
        useTime: '20231107',
        proDescribe: 'json',

      },
      ],
      deletedData: [{
        number: '1',
        proName: '1',
        caseNum: '1',
        useTime: '20230324',
        proDescribe: 'json',
      },
      ],



      search: '',
      drawer: false,
      direction: 'rtl',
      number: '',
      proName: '',
      caseNum: '',
      useTime: '',
      proDescribe: '',
      editIndex: '',
      multipleSelection: [],
      search2: ''


    }
  },
  methods: {
    letsearch1() {
      this.search = this.search2;
    },
    redo1() {
      this.search = ''
    },
    addData1() {
      let obj = {};
      obj.number = "";
      obj.proName = "";
      obj.caseNum = "";
      obj.useTime = "";
      obj.proDescribe = "";
      obj.editIndex = "";
      this.tableData.push(obj);
    },


    openRecycleBin() {
      this.dialogVisible = true;
    },

    handleEdit1(i, row) {
      this.drawer = true;
      this.number = this.tableData[i].number;
      this.proName = this.tableData[i].proName;
      this.caseNum = this.tableData[i].caseNum;
      this.useTime = this.tableData[i].useTime;
      this.proDescribe = this.tableData[i].proDescribe;
      this.editIndex = i;
      console.log(index, row);
    },
    handleDelete1(index, row) {
      this.tableData.splice(index, 1)
      console.log(index, row);
    },
    drawercancel1() {
      this.drawer = false;
    },
    confirmEdit1() {
      let i = this.editIndex;
      this.tableData[i].number = this.number;
      this.tableData[i].proName = this.proName;
      this.tableData[i].caseNum = this.caseNum;
      this.tableData[i].useTime = this.useTime;
      this.tableData[i].proDescribe = this.proDescribe;
      this.drawer = false;
      // this.number='';
      // this.proName='';
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    batchDel1() {
      this.$confirm('此操作将批量删除用例, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let val = this.multipleSelection     //选中的值
        if (val) {
          val.forEach((val, index) => {
            this.tableData.forEach((v, i) => {
              if (val.number === v.number) {
                this.tableData.splice(i, 1)


              }
            })
          })
        }
        this.$message.success("删除成功")
      })
    },
    open() {
      this.$confirm('此操作将删除选中的所有集合, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    open2() {
      this.$alert('<i>删除成功！</i>', {
        dangerouslyUseHTMLString: true
      });
    }


  },
}
</script>
<style>
.probtn {
  width: 100px;
  border: 0px;
  height: 34px;
  background-color: #94D8F6;
  font-size: 14px;
  margin-left: 50px;
  float: left;
  text-align: center;
  line-height: 34px;

}

.search {
  height: 35px;
  width: 300px;
  font-size: 14px;
  float: left;
  margin-left: 5px;
  padding-left: 5px
}

.searchBtn {
  height: 35px;
  width: 80px;
  font-size: 10px;
  margin-left: 10px;

}

.redoBtn1 {
  height: 35px;
  width: 80px;
  font-size: 10px;
  margin-left: 10px;
  margin-right: 450px;
}

.add2 {
  height: 40px;
  width: 100px;
  font-size: 15px;
}

.delete1 {
  height: 40px;
  width: 100px;
  font-size: 15px;
}



.tablerow {
  height: 20px;
  font-size: 45px;
  line-height: 25px;
}

.drawerrow {
  height: 40px;
  margin-left: 20px;
  line-height: 40px;
  font-size: 15px;
  margin-top: 20px
}

.editform1 {
  margin-left: 30px;
  height: 35px;
  width: 200px;
  font-size: 15px;
}

.drawerbtn {
  margin-top: 30px;
  width: 100px;
  height: 40px;
  font-size: 16px;
}

.page2 {
  width: 500px;
  height: 50px;
  align-content: center;
  margin-left: 400px;
  margin-top: 76px;


}
</style>





